<template>
  <div class="inputDom">

    <!-- 回复弹出@框 -->
    <div class="eit-comment" v-show="eitdiv">
    <span>回复@地球发动机</span>
    <div class="close" @click="hideClose">X</div>
    </div>
    <div class="disable" v-show="!isShow">
      
    </div>

    <!-- 已激活状态 -->
    <div class="enable">
      <el-input
        class="post-textarea"
        type="textarea"
        :rows="3"
        placeholder="说点什么吧"
        ref="textarea"
        @blur="hide"
        v-model="textarea"
        id="input"
      >
      </el-input>
      <el-button @click="sendComment" class="post-btn" type="primary">
        提交
      </el-button>
    </div>

    <!-- 上传头像 -->
    <div class="photos">
      <el-upload
        name="files"
        :on-success="handleUpload"
        :action="$axios.defaults.baseURL + '/upload' "
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>


  </div>
</template>

<script>
import {eventBus} from '@/utils/eventBus'

export default {

    data() {
        return {
            eitdiv:false,
            textarea: '',
            input: '',
            isShow: true,
            commentID:'',
            dialogImageUrl: "",
            dialogVisible: false,
            pics:[]
        }
    },
   

    methods: {
    // 图片框、文件上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 图片上传
      handleUpload(response, file, fileList) {
        // console.log(response);
        this.pics.push(response[0]);
        console.log(this.pics);
      },

        hideClose(){
            this.commentID='';
            this.eitdiv=false

        },
        showTextarea() {
            // 在 vue 中 跟 jq 不一样
            // $('.box').show()
           setTimeout(() => {
                this.isShow = true;
           }, 50)
            console.log(1);
        },
        hide() {
            this.isShow = false;
        },
        sendComment() {
            console.log('点击发送');
            console.log(this.pics);
              this.$axios({
                url:"/comments",
                method:"post",
                data:{
                    content:this.textarea,
                    post:this.$route.query.id,
                    follow:this.commentID,
                    pics:this.pics  
                },
                headers: {
                Authorization: "Bearer " + this.$store.state.user.userInfo.token,
                "Content-Type":	'application/json'
                },
            }).then(res=>{
                console.log(res);
                if (res.data.message = "提交成功") {
                    this.$message.success('提交成功');
                    window.location.reload();
                    

                }
            })
        },
    },

    mounted(){
        eventBus.$on('sendReply',(nickname)=>{
            this.commentID=nickname;
            this.eitdiv=true
            this.$nextTick(()=>{
            this.$refs.textarea.$el.querySelector("#input").focus()
            });  /* 用事件主线和获取焦点实现点击回复按钮跳到Input框 */
        })
    },

}
</script>

<style lang="less" scoped>
.inputDom {
  .post-input {
    margin-bottom: 20px;
  }

  .post-textarea {
    margin-bottom: 20px;
  }
  .post-btn {
    float: right;
  }


     .eit-comment {
        width: 180px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #e7e7e9;
        border-radius: 10px;
        background-color: #f4f4f5;
        margin-bottom: 10px;
        color: #98999c;
        position: relative;

        .close{
            cursor: pointer;
            display: inline-block;
            position: absolute;
            top: 14px;
            right: 9px;
            width: 14px;
            height: 14px;
            line-height: 14px;
            font-size: 14px;
        }
      }
}
</style>